<template>
  <div class="public_main">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>{{$t('dashBoard.no2')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('billing.no1')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('billing.no3')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- -------------搜索查询栏------------------------ -->
    <search 
      :searchData="searchData" 
      @search="search" 
      @putExcel="putExcel" 
      :searchRight="true"
      :outputRight="$store.state.common.permiss.rechargedetail.includes('export')"
    ></search>

    <div class="list_operation" v-if="$store.state.common.permiss.rechargedetail.includes('add')">
      <el-button 
        type="primary"  
        size="small"
        @click="showRecharge">+{{$t('billing.no16')}}</el-button>
    </div>

    <!-- -------------表格数据开始------------------------ -->
    <!-- <div class="table" v-if="$store.state.common.permiss.includes('RIGHT_ACCOUNT_LENDING_LIST')"> -->
    <div class="table">
      <template>
        <el-table :data="tableData" stripe size="small" >
          <el-table-column align="center" prop="createTime" :label="$t('billing.no13')"></el-table-column>
          <el-table-column align="center" prop="partnerNo" :label="$t('merchantList.no8')"></el-table-column>
          <el-table-column align="center" prop="partnerName" :label="$t('merchantList.no1')"></el-table-column>
          <el-table-column align="center" prop="paymentAmount" :label="$t('billing.no14')">
            <template slot-scope="scope">
              <span>{{scope.row.paymentAmount+scope.row.paymentAmountCurrency}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="rechargeAmount" :label="$t('billing.no9')">
            <template slot-scope="scope">
              <span>{{scope.row.rechargeAmount+scope.row.rechargeAmountCurrency}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="exchangeRate" :label="$t('billing.no15')"></el-table-column>
          <el-table-column align="center" prop="nickName" :label="$t('userSuggest.adminName')"></el-table-column>
          <el-table-column align="center" prop="remark" :label="$t('public.no37')"></el-table-column>
        </el-table>
      </template>
    </div>
    <!-- ------------  分页显示栏  ------------------------ -->
    <el-row type="flex" justify="end">
      <div class="pages" >
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          layout="sizes, prev, pager, next, total,->"
          :page-sizes="pagination.pageSizeOptions"
          :page-size="pagination.pageSize"
          @size-change="handleSizeChange"
          :total="pagination.total">
        </el-pagination>
      </div>
    </el-row>

    <!-- 充值弹窗 -->
    <el-dialog :title="$t('billing.no16')" :visible.sync="addFlag"  width="660px" >
      <el-form :model="addInfo" size="small" ref="addForm" label-width="120px" :rules="rules">
        <el-form-item :label="$t('merchantList.no1')" prop="partnerNo">
          <el-select v-model="addInfo.partnerNo" >
            <el-option :label="item.label"  :value="item.value" v-for="(item, i) in option1" :key="i"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('billing.no14')" prop="paymentAmount">
          <el-input type="number"  v-model="addInfo.paymentAmount" class="input-with-select" >
            <el-select v-model="addInfo.paymentAmountCurrency" slot="prepend" style="width:120px">
              <el-option 
                :label="item.label"
                :value="item.value" v-for="(item, i) in option2" 
                :key="i"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('billing.no15')" >
          <el-input type="text"  v-model="addInfo.exchangeRate" maxlength="100"></el-input>
        </el-form-item>
        <el-form-item :label="$t('billing.no9')" prop="rechargeAmount">
          <el-input type="number"  v-model="addInfo.rechargeAmount" maxlength="10">
            <el-button slot="append" >{{$t('adminHome.moneyUnit')}}</el-button>
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('public.no37')" >
          <el-input type="textarea" resize="none" :rows="4" v-model="addInfo.remark" maxlength="600"></el-input>
        </el-form-item>
      </el-form>
      <div  class="flex flex-justify-center" >
        <el-button type="primary" @click="addSubmit('addForm')">{{$t('public.no49')}}</el-button>
        <el-button @click="addClose()">{{$t('public.no50')}}</el-button>
      </div>
    </el-dialog>


    <div class="foot"></div>

  </div>
</template>
<script>
import putExcel from 'src/mixins/putExcel.js';

export default {
  name: 'rechargeDetail',
  mixins:[putExcel],
  data () {
    const searchData=[
      {
        type: 'input',
        label: 'merchantList.no8',
        attr: 'partnerNo',
        value: ''
      },
      {
        type: 'input',
        label: 'merchantList.no1',
        attr: 'partnerName',
        value: ''
      },
      {
        type: 'rangePicker',
        label: 'public.no33',
        attr: 'createTime',
        value: [],
      }]
    return {
      flag: true,
      loadFlag: true,
      addFlag: false,
      partnerName: '',
      pagination: {
        pageSize: global.config.pageSize,
        pageSizeOptions: global.config.pageSizeOptions,
        current: 1,
        total: 0,
      },
      searchData:searchData,
      formInline: {},// 用户查询信息数据对应字段
      tableData: [],// 表格数据
      option1: [],// 表格数据
      option2: [
        {value:'RMB',label:'RMB'},
        {value:'USD',label:'USD'},
        {value:'VND',label:'VND'},
        {value:'RP',label:'RP'},
        {value:'PHP',label:'PHP'}
      ],// 表格数据
      addInfo: {
        partnerNo: '',
        partnerName: '',
        paymentAmount: '',
        paymentAmountCurrency: 'RMB',
        exchangeRate: '',
        rechargeAmount: '',
        rechargeAmountCurrency: '元',
        remark: '',
      },
      putExcelUrl:this.$action.billing_listExport,
      rules: {
          partnerNo: [
            { required: true, message: ' ', trigger: 'change' }
          ],
          paymentAmount: [
            { required: true, message: ' ', trigger: 'blur', pattern: /^[1-9]\d*$/, }
          ],
          rechargeAmount: [
            { required: true, message: ' ', trigger: 'blur', pattern: /^-?[1-9]\d*$/, }
          ],
        }
    }
  },
  methods: {
    handleSizeChange (val) {// 每页条数变化时操作
      this.pagination.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange (val) { // 分页按钮点击操作
      this.pagination.current = val;
      this.getTableData();
    },
    search(search) { // 搜索
      this.formInline = {
        partnerName: search.partnerName,
        partnerNo: search.partnerNo,
        beginTime: search.createTime?search.createTime[0]:'',
        endTime: search.createTime?search.createTime[1]:'',
      };
      this.pagination.current = 1;
      this.getTableData();
    },
    getTableData () { // 列表数据获取
      this.loadFlag = true;
      let option = {
        pageNum:this.pagination.current,
        pageSize:this.pagination.pageSize,
        param: {
          ...this.formInline
        }       
      }
      this.$axios.post(this.$action.billing_list, option).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.pagination.total = res.data.total;
        }else {
          this.$globalMsg.error(res.message)
        }
        this.loadFlag = false;
      })
    },
    showRecharge(){
      this.addFlag = true
    },
    addSubmit(formName){
      this.$refs[formName].validate((valid) => {
          if (valid) {
            let options = {
              param: {
                "partnerNo":this.addInfo.partnerNo,
                "partnerName":this.option1.filter(value=>value.partnerNo==this.addInfo.partnerNo)[0].partnerName,
                "partnerId":this.option1.filter(value=>value.partnerNo==this.addInfo.partnerNo)[0].id,
                "paymentAmount":this.addInfo.paymentAmount,
                "paymentAmountCurrency":this.addInfo.paymentAmountCurrency,
                "exchangeRate":this.addInfo.exchangeRate,
                "rechargeAmount":this.addInfo.rechargeAmount,
                "rechargeAmountCurrency":"元",
                "remark":this.addInfo.remark
              }
            }
            this.$axios.post(this.$action.billing_add, options).then(res => {
              if (res.code == 200) {
                this.$globalMsg.success(this.$t('message.success'))
                this.getTableData()
              }else{
                this.$globalMsg.error(res.message)
              }
              this.addClose()
            })
          }
        });
      
    },
    addClose(){
      this.$refs.addForm.resetFields();
      this.addFlag = false
      this.addInfo.partnerNo = ''
      this.addInfo.partnerName = ''
      this.addInfo.paymentAmount = ''
      this.addInfo.paymentAmountCurrency = 'RMB'
      this.addInfo.exchangeRate = ''
      this.addInfo.rechargeAmount = ''
      this.addInfo.rechargeAmountCurrency = '元'
      this.addInfo.remark = ''
    },
    getpartnerName(){
      let option = {
        param: {}     
      }
      this.$axios.post(this.$action.partner_option, option).then(res => {
        if (res.code == 200) {
          let arr = res.data;
          arr.forEach(item=>{
            item.label = item.partnerName
            item.value = item.partnerNo
          })
          this.option1 = arr
        }
      })
    }
  },
  mounted () {
    this.getTableData();
    this.getpartnerName();
  }
}
</script>
<style scoped lang="scss">

</style>
